<template>
    <div style="padding:0;margin: 0;">
        <div style="padding: 20px;">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
                style="margin:5px;">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group id="excelSortEl" v-model="checkList" @change="handleCheckedCitiesChange"
                style="display: flex;flex-wrap: wrap;">
                <el-checkbox :data-id="index" class="gyc-check" v-for="(item, index) in excelItems" :label="item"
                    :key="'el-i-' + index" style="width:100px;margin:5px;display: flex;align-items: center;"
                    :title="item.label">
                    <span v-text="item.label"
                        style="display: block; text-overflow: ellipsis;width:80px;overflow: hidden;"></span>
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <div style="width:100%;display: flex;padding: 10px;justify-content: center;border-top: 1px solid #dcdfe6;">
            <el-button type="primary" @click="createExcel" :disabled="checkList.length <= 0">{{ $attrs.commitText
                }}</el-button>
        </div>
    </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
    data() {
        return {
            checkAll: false,
            checkList: [],
            excelItems: this.$attrs.items,
            isIndeterminate: true,
            afterDragData: []
        };
    },
    methods: {
        createExcel() {
            let arr = [];
            (this.afterDragData.length == 0 ? this.excelItems : this.afterDragData).forEach(element => {
                if (this.checkList.includes(element)) {
                    arr.push(element)
                }
            });
            this.$emit('save', arr);
        },
        handleCheckAllChange(val) {
            this.checkList = val ? this.$attrs.items : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.excelItems.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.excelItems.length;
        }
    },
    mounted() {
        this.checkAll = true;
        this.isIndeterminate = false;
        this.checkList = this.$attrs?.items || [];
        this.sortable = new Sortable(document.getElementById('excelSortEl'), {
            animation: 150,
            //dataIdAttr: 'data-id',
            onEnd: evt => {
                this.afterDragData = [];
                let indexArr = this.sortable.toArray();
                console.log(indexArr);
                indexArr.forEach(element => {
                    this.afterDragData.push(this.excelItems[parseInt(element)])
                });
            },
        });

    },
    beforeDestroy() {
        if (this.sortable) {
            this.sortable.destroy();
        }
    }
};
</script>

<style lang="scss" scoped></style>
<style>
.gyc-check {
    width: 115px !important;
    height: 30px !important;
    border: 1px solid #dfe6ec;
    margin: 5px !important;
    border-radius: 2px !important;
    padding-left: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.gyc-check:hover {
    background: #f5f1f1;
    border-radius: 2px;
}
</style>